<template>
  <div class="flexContent">
    <!-- 门店库存盘点详情 -->
    <div class="searchBox" style="height: 200px;">
      <el-form :model="infoData" style="margin-bottom: 20px;" ref="storeAdvancedetailRef" label-position="left"
        label-width="auto" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="盘点编号:">
              <span>{{ infoData.number }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门店名称:">
              <span>{{ infoData.storeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="盘点时间:">
              <span>{{ infoData.createTime | parseTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="盘点类型:">
              <span>{{ infoData.type == '0' ? '期初盘点' : '库存盘点' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="盘点人:">
              <span>{{ infoData.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="infoData.type == '0'">
            <el-form-item label="门店货物金额:">
              <span>{{ infoData.amount }}元</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form class="demo-form-inline" label-position="left" label-width="auto" @submit.native.prevent>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品">
              <el-input v-clearEmoji v-model.trim="name" style="width: 70%" clearable @keyup.enter.native="searchFn"
                placeholder="商品名称/助记符/条码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" v-if="infoData.type == '1'">
              <el-select v-model="status" popper-class="eloption" clearable style="width: 70%" filterable
                placeholder="请选择">
                <el-option value="0" label="无盈亏" />
                <el-option value="1" label="盘盈" />
                <el-option value="2" label="盘亏" />
                <el-option value="3" label="漏盘" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品类型" v-if="infoData.type == '0'">
              <el-select v-model="types" popper-class="eloption" clearable style="width: 70%" filterable
                placeholder="请选择">
                <el-option value="0" label="期初" />
                <el-option value="1" label="自营" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button @click.stop="searchFn" class="submitBtn" icon="el-icon-search">搜索</el-button>
              <el-button @click="exportFn" class="submitBtn" icon="el-icon-download"
                v-has="'initialInventory_export'">导出</el-button>
              <el-button @click.stop="emptyFn" class="resetBtn" icon="el-icon-refresh-right">重置</el-button>
              <el-button @click="returnFn" class="resetBtn" icon="el-icon-back">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table" style="display: flex;flex:1;flex-direction: column;justify-content: space-between;" id="tableBox"
      v-height>
      <div style="flex:1;">
        <vxe-table :column-config="{ resizable: true }" border class="tablebox" ref="xTable1"
          :row-config="{ isHover: true }" :scroll-y="{ enabled: true, gt: 21 }" style="width: 100%" height="100%"
          size="medium" align="center">
          <vxe-column type="seq" min-width="80" title="序号" />
          <vxe-column field="name" title="商品名称" :min-width="elTableAdaptationWidth('name', infoData.storeAdvanceList)" />
          <vxe-column field="barCode" title="商品条码" min-width="130" />
          <vxe-column field="categoryName" title="商品分类"
            :min-width="elTableAdaptationWidth('categoryName', infoData.storeAdvanceList)">
            <template v-slot="{ row }">
              <span>{{ row.categoryName ? row.categoryName : '-' }}</span>
            </template>
          </vxe-column>
          <vxe-column field="unitName" title="商品单位" min-width="100">
            <template v-slot="{ row }">
              <span>{{ row.unitName ? row.unitName : '-' }}</span>
            </template>
          </vxe-column>
          <vxe-column field="standard" title="规格" min-width="100">
            <template v-slot="{ row }">
              <span>{{ row.standard ? row.standard : '-' }}</span>
            </template>
          </vxe-column>
          <vxe-column field="buyingPrice" title="进货价" min-width="100" v-if="infoData.type == '0'" />
          <!-- <vxe-column field="storePrice" title="零售价" min-width="100" v-if="infoData.type == '0'" /> -->
          <vxe-column field="types" title="商品类型" min-width="100" v-if="infoData.type == '0'">
            <template v-slot="{ row }">
              <span v-if="row.types === '0'">期初</span>
              <span v-if="row.types === '1'">自营</span>
            </template>
          </vxe-column>
          <vxe-column field="stockNum" title="标品库存" min-width="100" v-if="infoData.type == '1'" />
          <vxe-column field="initialInventory" title="期初库存" min-width="100" v-if="infoData.type == '1'" />
          <vxe-column field="inventoryNum" title="库存总数量" min-width="120" v-if="infoData.type == '1'" />
          <vxe-column field="stocktakingNum" title="盘点数量" min-width="100" />
          <vxe-column field="status" title="状态" min-width="100" v-if="infoData.type == '1'">
            <template v-slot="{ row }">
              <el-tag v-if="row.status === '0'" type="success">无盈亏</el-tag>
              <el-tag v-if="row.status === '1'" type="primary">盘盈</el-tag>
              <el-tag v-if="row.status === '2'" type="error">盘亏</el-tag>
              <el-tag v-if="row.status === '3'" type="danger">漏盘</el-tag>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="paginationBox" style="height: 50px;padding-top: 20px;">
        <el-pagination :current-page="page.pageNum" background :page-sizes="$pageSizes" :page-size="page.pageSize"
          layout="total,->, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import { getSelectStoreCheckInfoDetails, exportSelectStoreCheckInfoDetails } from "@/api/shop";
export default {
  name: "StoreAdvanceDetail",
  data() {
    return {
      isSearch: false,
      infoData: {
        number: "",
        storeName: "",
        createTime: "",
        type: "",
        userName: '',
        storeAdvanceList: [],
        initialInventoryDetailId: '',
        amount: ''
      },
      name: "",
      status: '',
      types: '',
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },

    };
  },
  created() {
    this.infoData.initialInventoryDetailId = this.$route.query?.id;
    this.getSelectStoreCheckInfoDetails();
  },
  methods: {
    async getSelectStoreCheckInfoDetails() {
      if (!this.isSearch) {
        this.name = "";
        this.status = "";
        this.types = "";
      }
      console.log(this.infoData.initialInventoryDetailId, "id");
      const res = await getSelectStoreCheckInfoDetails({
        ...this.page,
        name: this.name,
        status: this.status,
        id: this.infoData.initialInventoryDetailId,
        types: this.types,
      });
      if (res.code === 200) {
        console.log(res.data, "success");
        this.infoData.number = res.data.number;
        this.infoData.storeName = res.data.storeName;
        this.infoData.createTime = res.data.createTime;
        this.infoData.type = res.data.type;
        this.infoData.amount = res.data.amount;
        this.infoData.userName = res.data.userName;
        this.infoData.storeAdvanceList = res.data.pageInfo.list;
        this.page.pageSize = res.data.pageInfo.pageSize;
        this.page.pageNum = res.data.pageInfo.pageNum;
        this.page.total = res.data.pageInfo.total;
        const $table = this.$refs.xTable1
        $table.loadData(this.infoData.storeAdvanceList);
      }
    },
    async searchFn() {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.isSearch = true;
      this.getSelectStoreCheckInfoDetails();
    },
    emptyFn() {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.isSearch = false;
      this.name = "";
      this.status = "";
      this.types = "";
      this.getSelectStoreCheckInfoDetails();
    },
    // 获取条数改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      console.log(`每页 ${val} 条`);
      this.getSelectStoreCheckInfoDetails();
    },
    // 获取页数改变
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getSelectStoreCheckInfoDetails();
    },
    returnFn() {
      this.closeTag("initialInventoryInfo");
    },
    async exportFn() {
      this.$confirm('确认导出数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (!this.isSearch) {
          this.name = "";
          this.status = "";
          this.types = "";
        }
        let response = {}
        response = await exportSelectStoreCheckInfoDetails({
          name: this.name,
          status: this.status,
          id: this.infoData.initialInventoryDetailId,
          types: this.types,
        })
        let res = null;
        if (response.data.type === "application/json") {
          const reader = new FileReader();  //创建一个FileReader实例
          reader.readAsText(response.data, 'utf-8'); //读取文件,结果用字符串形式表示
          reader.onload = () => {//读取完成后,**获取reader.result**
            res = JSON.parse(reader.result)
            if (res.code !== 200) {
              this.$message.error(res.message);
              return;
            }
          }
        } else {
          const fileName = decodeURIComponent(response.headers["content-disposition"].split(";")[1].split("''")[1]);
          FileSaver.saveAs(response.data, fileName);
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.storeAdvanceDetail_content {
  // padding: 10px;

  .main {
    padding: 32px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;

    .btn {
      /* margin: 0 auto; */
      padding-top: 50px;
      text-align: center;
    }
  }

  .table {
    flex: 1;
    display: flex;
    // flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
